<template>
	<div class="con-z">
		<!-- <div class="left">
			<ConLeft  :msglist="msglist" ></ConLeft>
		</div> -->
		<div class="right">
			<div class="right-top">
				数据平台管理
			</div>
			<div class="right-bto">

				
				<div class="main">
				<el-table :data="tableData" height="500" stripe style="width: 100%" :header-cell-style="{'text-align':'center'}"
						:cell-style="{'text-align':'center'}" border>
						<el-table-column prop="id" label="ID" width="80"></el-table-column>
					<el-table-column prop="name" label="模式名称" min-width="80"></el-table-column>
				
						
						<el-table-column label="图片数量" prop="image_num"  >
						</el-table-column>
					<el-table-column label="操作" min-width="200">
						<template slot-scope="scope">
							<el-button type="primary" @click="handleChange(scope.row)">选择图片</el-button>
							<el-button type="success" @click="handlefabu(scope.row)" >发布应用</el-button>
						</template>
					</el-table-column>
				</el-table>
				</div>
			
			</div>
			
		</div>
	</div>
</template>

<script>
	import setting from '@/config/setting';
	export default{
		data(){
			return{
				msglist:[
					{name:'模式管理',id:0},
				],
				dialogVisible:false,
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				tableData:[],
			}
		},
		mounted(){
			// this.getlist()
		},
		methods:{
			getlist(){
				this.$http.get('/back/mode/list').then(res => {
					console.log(res)
					this.tableData = res.data.data
				})
			},
			handleChange(item){
				this.$router.push("/moshiguanli/tupianxuanze?name=" + item.name + '&id=' + item.id)
			},
			handlefabu(item){
				this.$confirm('此操作将修改线上陈展图片, 是否继续?', '提示', {
				         confirmButtonText: '确定',
				         cancelButtonText: '取消',
				         type: 'warning'
				       }).then(() => {
						   
											this.$http.post('/back/mode/release',{
												id:item.id,
											}).then(res => {
												if (res.data.code == 1) {
													this.$message({
														message: res.data.msg,
														type: 'success'
													});
												} else {
													this.$message.error(res.data.msg);
												}
											})
				         
				       }).catch(() => {
				         this.$message({
				           type: 'info',
				           message: '已取消'
				         });          
				       });
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.video-avatar{
		width: 500px;
		height:300px;
		display: block;
		// left:30px;
	}
	.avatar-uploader  {
		width: 178px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.flex{
		display:flex;
	}
	.con-z{
		height:100%;
		position: relative;
		.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 10%;
			height: 100%;
			background-color: #fff;
			border-right: 1px solid rgba(0,0,0,.1);
		}
		.right{
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			.right-top{
				witdh:100%;
				background-color: #fff;
				font-weight: 600;
				font-size: 16px;
				padding: 16px 24px;
			}
			.right-bto{
				margin-top: 20px;
				padding: 0 20px ;
				overflow: auto;
				height: 90%;
				.search{
					padding: 24px;
					background-color: #fff;
					border-bottom: 1px solid #e8e8e8;
					.input-with-select{
						width:360px;
					}
					.shaixuan{
						color:#666666;
						.time{
							margin-top: 10px;
							height: 36px;
							line-height: 36px;
							.font{
								margin-right: 10px;
							}
						}
					}
				}
				.paixu{
					background-color: #fff;
					padding: 24px;
					font-size: 13px;
					display:flex;
					justify-content: space-between;
					border-bottom: 1px solid #e8e8e8;
				}
				.main{
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;
					padding: 24px;
					border-bottom: 1px solid #e8e8e8;
					.main-item{
						width:230px;
						height:230px;
						margin: 0 15px;
						.main-btn{
							margin-top: 5px;
							display:flex;
							justify-content: space-between;
							font-size: 20px;
						}
					}
				}
			}
			
		}
	}
	
</style>